<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    // 1.形成的词法环境
    var message = 'hello world';
    var age = 18
    function foo() { }
    let address = '广州市'
    {
      var height = 1.88

      let title = '教师'
      let info = '了解真相~'
    }

    // 2.监听按钮的点击
    const btnEls = document.querySelectorAll("button")
    // for (var i = 0; i < btnEls.length; i++) {
    //   var btnEl = btnEls[i];
    //   // btnEl.index = i
    //   (function(m) {
    //     btnEl.onclick = function() {
    //       console.log(`点击了${m}按钮`)
    //     }
    //   })(i)
    // }
    for (let i = 0; i < btnEls.length; i++) {
      btnEls[i].onclick = function() {
        console.log(`点击了${i}按钮`)
      }
    }

  </script>
</body>

</html>